<template>
    <div class="easyd-weixin-Box">
        <div class="addShopBox">
            <div class="addShopTitle">基本信息</div>
            <div class="addShopInput">
                <input type="text" placeholder="请输入商品名称" />
            </div>
            <div class="addShopSelect">
                <input type="text" readonly placeholder="请选择商品分类" @click="goSelectShopCategory" />
                <div class="rightIcon"><i class="fa fa-angle-right fa-lg"></i></div>
            </div>
            <div class="addShopTextArea">
                <textarea placeholder="请输入商品描述"></textarea>
            </div>
            <div class="addShopInput">
                <input type="text" placeholder="请输入商品价格" />
            </div>
            <div class="addShopInput">
                <input type="text" placeholder="请输入商品库存" />
            </div>

            <div class="addShopTitle">商品详细</div>
            <div class="addShopDetailBox">
                <div class="addShopDetailItem addShopDetailTextItem">
                    <textarea placeholder="请输入文字内容"></textarea>
                    <div class="addShopDetailItemClose">
                        <i class="fa fa-close fa-lg"></i>
                    </div>
                </div>
                <div class="addShopDetailItem addShopDetailTextItem">
                    <textarea placeholder="请输入文字内容"></textarea>
                    <div class="addShopDetailItemClose">
                        <i class="fa fa-close fa-lg"></i>
                    </div>
                </div>
                <div class="addShopDetailItem addShopDetailImageItem">
                    <div class="addShopDetailImageBox">
                        <div class="addShopDetailImageUpload">
                            <i class="fa fa-plus fa-lg"></i>
                            <p>上传图片</p>
                        </div>
                        <!-- <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery> -->
                    </div>
                    <div class="addShopDetailItemClose">
                        <i class="fa fa-close fa-lg"></i>
                    </div>
                </div>
                <div class="addShopDetailItem addShopDetailImageItem">
                    <div class="addShopDetailImageBox">
                        <div class="addShopDetailImageUpload">
                            <i class="fa fa-plus fa-lg"></i>
                            <p>上传图片</p>
                        </div>
                        <!-- <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery> -->
                    </div>
                    <div class="addShopDetailItemClose">
                        <i class="fa fa-close fa-lg"></i>
                    </div>
                </div>
            </div>
            <div class="addShopAddDetailItemBox">
                <div class="addShopAddDetailItem">新增文本</div>
                <div class="addShopAddDetailItem">新增图片</div>
            </div>
        </div>
        <div class="addShopBottomMenuBox">
            <div class="addShopBottomMenuItem">详情预览</div>
            <div class="addShopBottomMenuItem" style="border-left:1px solid #fff">提交操作</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            imageDemoUrl: "http://testfileupload.oss-cn-beijing.aliyuncs.com/shangpin1.jpg"
        }
    },
    methods : {
        goSelectShopCategory(){
            this.$router.push({
                path : '/selectShopCategory'
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'
.addShopBox {
    position absolute
    top 0px
    bottom 50px
    left 0px
    right 0px
    padding-left 15px
    padding-right 15px
    font-size 16px
    overflow auto
    -webkit-overflow-scrolling : touch;
    box-sizing border-box

    .addShopAddDetailItemBox {
        width 100%
        height 50px
        justify-content: space-between;
        display flex
        margin-bottom 15px  

        .addShopAddDetailItem {
            width 48%
            height 50px
            text-align center
            line-height 50px
            $itemStyle()

        }
    }

    .addShopDetailBox {
        width 100%
        height auto
        margin-bottom 15px   

        .addShopDetailItem {
            width 100%
            height 200px
            position relative
            margin-bottom 50px

            &:last-child {
                margin-bottom 15px    
            }
       
            .addShopDetailItemClose {
                position absolute  
                right 0px
                top -40px
                width 30px
                height 30px 
                line-height 30px
                text-align center

                i {
                    font-size 24px
                    color #999
                }
            }

            
        }

        .addShopDetailTextItem {
            textarea {
                border-radius 5px
                width 100%
                border 1px solid #eee
                outline none
                padding 10px 15px
                -webkit-appearance: none;
                box-sizing border-box
                height 100%
            } 
        }

        .addShopDetailImageItem {
            
            .addShopDetailImageBox {
                width 100%
                border-radius 5px
                border 1px solid #eee
                height 100%   

                .addShopDetailImageUpload {
                    width 100%
                    text-align center
                    font-size 30px
                    background #fff
                    border-radius 5px
                    color #999
                    height 100%  

                    i {
                        margin-top 70px
                    }

                    p {
                        font-size 16px
                        margin-top 10px
                    }
                }

                img {
                    border-radius 5px
                    width 100%
                    height 100%
                    object-fit cover
                }
            }
        }
    }


    .addShopTitle {
        width 100%
        height 50px
        line-height 55px
        text-indent 16px
    }
    
    .addShopSelect {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        position relative
        

        input {
            width 100%
            height 100%
            padding 15px
            -webkit-appearance: none;
            box-sizing border-box
            border 1px solid #eee
            padding-right 50px
            outline none
        }

        .rightIcon {
            width 30px
            position absolute
            height 45px
            right 0px
            color #999
            text-align center
            line-height 45px
            top 0px  
        }

    }

    .addShopInput {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        position relative

        input {
            width 100%
            height 100%
            -webkit-appearance: none;
            padding 15px
            box-sizing border-box
            border 1px solid #eee
            outline none
        }
    }

    .addShopTextArea {
        width 100%
        height 150px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden

        textarea {
            width 100%
            height 100%
            padding 10px 15px
            box-sizing border-box
            -webkit-appearance: none;
            border 1px solid #eee
            outline none
        }
    }
}

.addShopBottomMenuBox {
    position absolute
    bottom 0px
    height 50px
    left 0px
    right 0px
    background #eee   
    display flex 
    justify-content: space-between;

    .addShopBottomMenuItem {
        width 50%
        height 50px
        text-align center
        line-height 50px
        background: #FDDE6E;
    }
}

</style>

